<template>
  <div class="main">
    <!-- <div class="inputbox">
      <input type="text" v-model="input_name" />
      <input type="text" v-model="input_score" />
      <button v-on:click="insertBeauty">添加该条数据</button>
    </div> -->
    <div class="fork">
      <img src="../images/fork.png" draggable="false" />
    </div>
    <div class="palace">
      <img src="../images/palace.jpg" draggable="false" />
    </div>
    <div class="bedroom">
      <img src="../images/bedroom.jpg" draggable="false" />
    </div>
    <Beauty
      v-for="ele in forkArr"
      :key="ele.name"
      :name="ele.name"
      :score="ele.score"
      :img="ele.img"
      :girl="ele"
      @gotoPalace="gotoPalace"
    ></Beauty>

    <gongnv-view
      v-for="(ele, index) in queue.getArray()"
      :key="ele.girl.name"
      :name="ele.girl.name"
      :score="ele.girl.score"
      :img="ele.girl.img"
      :girl="ele.girl"
      :index="index"
      :gx="ele.x_px"
      :gy="ele.y_px"
      @xuanFei="xuanFei"
    >
    </gongnv-view>

    <gongnv-view
      v-for="(ele, index) in feiziArr"
      :key="ele.girl.name"
      :name="ele.girl.name"
      :score="ele.girl.score"
      :img="ele.girl.img"
      :girl="ele.girl"
      :index="index"
      :gx="ele.x_px"
      :gy="ele.y_px"
      @xuanFei="xuanFei"
    >
    </gongnv-view>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { PriorityQueue } from "../entities/PriorityQueue";
import { Girl } from "../entities/Girl";
import { Gongnv } from "../entities/Gongnv";
import { manager } from "../common/ImageManager";
import { randomFenghao, randomInt, randomName } from "../common/Calculate";
import Beauty from "../components/beauty.vue";
import GongnvView from "../components/gongnv.vue";

@Component({
  components: {
    Beauty,
    GongnvView,
  },
})
export default class HelloWorld extends Vue {
  private feiziArr: Array<Gongnv> = new Array(0);
  private queue: PriorityQueue<Gongnv> = new PriorityQueue(16);
  private forkArr: Array<Girl> = new Array(0);
  private input_name: string | any = "";
  private input_score: string | any = "";
  private beautyLimit: number = 110;

  @Prop() private msg!: string;

  public created(): void {
    this.generateForkArray(this.forkArr, 8);
    // let arr = this.queue.getArray();
  }

  private generateForkArray(arr: Array<Girl>, length: number): void {
    for (let i = 0; i < length; ++i) {
      arr.push(
        new Girl(randomName(), randomFenghao(), randomInt(40, this.beautyLimit))
      );
    }
    this.beautyLimit *= 0.9;
    if (this.beautyLimit <= 40) {
      this.beautyLimit = randomInt(40, 50);
    }
  }

  private randomInt() {}

  private insertBeauty() {
    this.forkArr.push(
      new Girl(this.input_name, randomFenghao(), this.input_score)
    );
  }

  private gotoPalace(val: Girl, x_px: string, y_px: string) {
    for (let i = 0; i < this.forkArr.length; ++i) {
      let girl: Girl = this.forkArr[i];
      if (girl.name == val.name) {
        let deleteArr = this.forkArr.splice(i, 1);
      }
      if (this.forkArr.length <= 2) {
        alert("皇帝抢走了好看的妹纸 民女的漂亮程度已经下降了一个档次了");
        //生成一批新的民女
        this.generateForkArray(this.forkArr, 4);
      }
    }
    let gongnv: Gongnv = new Gongnv(val, x_px, y_px);
    this.queue.insert(gongnv);
  }

  private xuanFei(val: Girl) {
    //选择妃子
    let newFeizi: Gongnv = this.queue.delMax();
    this.feiziArr.push(newFeizi);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
